<template>
  <div class="register-container">
    <el-card class="register-card">
      <h2>{{ t('register.title') }}</h2>
      <el-form :model="registerForm" :rules="rules" ref="registerFormRef" label-width="120px">
        <el-form-item :label="t('register.businessName')" prop="businessName">
          <el-input v-model="registerForm.businessName" :placeholder="t('register.enterBusinessName')"></el-input>
        </el-form-item>
        <el-form-item :label="t('register.ownerName')" prop="ownerName">
          <el-input v-model="registerForm.ownerName" :placeholder="t('register.enterOwnerName')"></el-input>
        </el-form-item>
        <el-form-item :label="t('register.email')" prop="email">
          <el-input 
            v-model="registerForm.email" 
            type="email" 
            :placeholder="t('register.enterEmail')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="t('register.phone')" prop="phone">
          <el-input v-model="registerForm.phone" :placeholder="t('register.enterPhone')"></el-input>
        </el-form-item>
        <el-form-item :label="t('register.username')" prop="username">
          <el-input v-model="registerForm.username" :placeholder="t('register.enterUsername')"></el-input>
        </el-form-item>
        <el-form-item :label="t('register.password')" prop="password">
          <el-input 
            v-model="registerForm.password" 
            type="password" 
            :placeholder="t('register.enterPassword')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="t('register.confirmPassword')" prop="confirmPassword">
          <el-input 
            v-model="registerForm.confirmPassword" 
            type="password" 
            :placeholder="t('register.enterConfirmPassword')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleRegister" 
            :loading="loading"
            style="width: 100%"
          >
            {{ t('register.registerButton') }}
          </el-button>
        </el-form-item>
      </el-form>
      <div class="login-link">
        <p>{{ t('register.hasAccount') }} <router-link to="/login">{{ t('register.loginHere') }}</router-link></p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'

export default {
  name: 'RegisterPage',
  setup() {
    const store = useStore()
    const router = useRouter()
    const { t } = useI18n()
    const loading = ref(false)
    
    const registerForm = reactive({
      businessName: '',
      ownerName: '',
      email: '',
      phone: '',
      username: '',
      password: '',
      confirmPassword: ''
    })
    
    const validatePassword = (rule, value, callback) => {
      if (value !== registerForm.password) {
        callback(new Error(t('register.passwordsMismatch')))
      } else {
        callback()
      }
    }
    
    const rules = {
      businessName: [
        { required: true, message: t('register.enterBusinessName'), trigger: 'blur' }
      ],
      ownerName: [
        { required: true, message: t('register.enterOwnerName'), trigger: 'blur' }
      ],
      email: [
        { required: true, message: t('register.enterEmail'), trigger: 'blur' },
        { type: 'email', message: t('register.invalidEmail'), trigger: 'blur' }
      ],
      phone: [
        { required: true, message: t('register.enterPhone'), trigger: 'blur' }
      ],
      username: [
        { required: true, message: t('register.enterUsername'), trigger: 'blur' },
        { min: 3, message: t('register.usernameMinLength'), trigger: 'blur' }
      ],
      password: [
        { required: true, message: t('register.enterPassword'), trigger: 'blur' },
        { min: 6, message: t('register.passwordMinLength'), trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: t('register.enterConfirmPassword'), trigger: 'blur' },
        { validator: validatePassword, trigger: 'blur' }
      ]
    }
    
    const handleRegister = async () => {
      try {
        loading.value = true
        
        // In a real application, you would make an API call to register the merchant
        // For now, using a mock implementation
        const response = await mockRegisterApi(registerForm)
        
        if (response.success) {
          ElMessage.success(t('register.registrationSuccess'))
          store.dispatch('login', { user: response.user, token: response.token })
          // Redirect to merchant dashboard
          router.push('/merchant')
        } else {
          ElMessage.error(response.message || t('register.registrationFailed'))
        }
      } catch (error) {
        console.error('Registration error:', error)
        ElMessage.error(t('register.errorOccurred'))
      } finally {
        loading.value = false
      }
    }
    
    // Mock API call - in a real app, replace with actual API call
    const mockRegisterApi = (data) => {
      return new Promise((resolve) => {
        // Simulate API call
        setTimeout(() => {
          // For simplicity, assume registration is always successful
          resolve({
            success: true,
            user: {
              id: 3,
              username: data.username,
              userType: 'MERCHANT'
            },
            token: 'mock-token-for-merchant'
          })
        }, 1000)
      })
    }
    
    return {
      registerForm,
      rules,
      loading,
      handleRegister,
      t
    }
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.register-card {
  width: 450px;
  padding: 20px;
}

.login-link {
  margin-top: 20px;
  text-align: center;
}

.login-link a {
  color: #409EFF;
  text-decoration: none;
}
</style>